<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2023-06-06 17:03:51
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2023-06-07 12:47:52
 * @FilePath: \ship-schedule-ui\src\widgets\demo\sample-pannel\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <mars-dialog :draggable="false" top="100" left="10" :width="400" :right="10">
    <div class="item waybill">
      <div class="itemTit">
        <span class="border-green">各水系内河航道里程（单位：公里）</span>
      </div>
      <div id="myChart1"></div>
    </div>
    <div class="item waybill">
      <div class="itemTit">
        <span class="border-green">各等级内河航道通航（单位：公里）</span>
      </div>
      <div id="myChart2"></div>
    </div>

    <a-form :model="formState" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
      <a-form-item label="面板测试" name="extent">
        <a-row :gutter="5">
          <a-col :span="19">
            <mars-input v-model:value="formState.extent" :allowClear="true"></mars-input>
          </a-col>
          <a-col :span="5">
            <a-space>
              <mars-button class="small-btn" @click="onClickDrawExtent">绘制</mars-button>
            </a-space>
          </a-col>
        </a-row>
      </a-form-item>
    </a-form>
  </mars-dialog>
</template>

<script setup lang="ts">
import { reactive } from "vue"
import useLifecycle from "@mars/common/uses/use-lifecycle"
import * as mapWork from "./map"

// 启用map.ts生命周期
useLifecycle(mapWork)

interface FormState {
  extent: string
}
const formState = reactive<FormState>({
  extent: ""
})

// 渲染模型
const onClickDrawExtent = () => {
  // formState.extent = "测试组件内部数据是否响应"
  mapWork.drawExtent()
}
mapWork.eventTarget.on("drawExtent", function (event: any) {
  formState.extent = event.extent
})
</script>
<style lang="less">
.item {
  margin-bottom: 10px;
}
.itemTit {
  padding: 10px 30px;
}
.itemTit span {
  height: 20px;
  line-height: 20px;
  border-left: 4px solid transparent;
  font-size: 17px;
}
</style>
